iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
Modern Web

React 學得動嗎系列 第 10

[Day 10] React 效能優化:把網站的腿接起來

  • 分享至 

  • xImage
  •  

歡迎來到我們 React 學習之旅的第十天。今天我們要來聊聊如何讓你的 React 應用程式接起腿後,跑得更快、更順暢。我們將介紹幾個超級實用的效能優化工具:memouseMemouseCallback

為什麼要做效能優化?

想像一下,如果你的 React 應用程式是一間餐廳。如果每次客人點餐,廚師都要重新準備所有的食材,那這間餐廳肯定會忙翻天。效能優化就像是幫廚師準備好常用的食材,讓他們可以更快地做出美味的料理。

React.memo:記住那些不常變的組件

React.memo 是一個高階組件,它可以幫助我們「記住」某個組件,除非它的 props 改變,否則不會重新渲染。

來看個例子:

import React, { memo } from 'react';

interface EmployeeProps {
  name: string;
  title: string;
}

const Employee: React.FC<EmployeeProps> = memo(({ name, title }) => {
  console.log(`${name} 重新渲染了!`);
  return (
    <div className="employee">
      <h3>{name}</h3>
      <p>{title}</p>
    </div>
  );
});

export default Employee;

在這個例子中,除非 nametitle 改變,否則 Employee 組件不會重新渲染。這就像是餐廳裡的常客,服務生記住了他們的常點餐點,不用每次都重新問。

useMemo:記住複雜的計算結果

useMemo 可以幫我們記住複雜計算的結果。除非依賴的值改變,否則不會重新計算。

import React, { useMemo } from 'react';

interface User {
  id: number;
  name: string;
  age: number;
}

const UserStats: React.FC<{ users: User[] }> = ({ users }) => {
  const averageAge = useMemo(() => {
    console.log('計算平均年齡...');
    return users.reduce((sum, user) => sum + user.age, 0) / users.length;
  }, [users]);

  return <div>平均年齡: {averageAge.toFixed(2)}</div>;
};

export default UserStats;

這就像是餐廳裡的特殊調味料,廚師會事先調配好,除非食譜改變,否則不需要每次都重新調配。

useCallback:記住那些常用的函數

useCallback 可以幫我們「記住」一個函數。這在把函數作為 props 傳遞給使用 React.memo 的子組件時特別有用。

import React, { useCallback, useState } from 'react';

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([]);

  const addTodo = useCallback((newTodo: string) => {
    setTodos(prevTodos => [...prevTodos, newTodo]);
  }, []);

  return (
    <div>
      <h2>待辦事項</h2>
      <TodoInput onAdd={addTodo} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

這就像是餐廳裡的招牌菜製作方法,除非食譜改變,否則廚師不需要每次都重新學習如何製作。

效能優化也是有代價的

雖然這些工具很好很強大,但不要過度使用。每次使用 memouseMemouseCallback,React 都需要做額外的工作來比較值是否改變。如果比較的成本比重新渲染還高,那反而會適得其反。

就像餐廳不會為了每一道菜都準備特製的調味料一樣,我們也不需要為每個組件或函數都使用這些優化技巧。只在真正需要的地方使用它們。

實際應用:優化一個購物車組件

讓我們來看一個實際的例子,如何優化一個購物車組件:

import React, { useMemo, useCallback } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
}

interface CartProps {
  products: Product[];
}

const CartItem: React.FC<Product> = memo(({ name, price }) => (
  <li>{name} - NT${price}</li>
));

const Cart: React.FC<CartProps> = ({ products }) => {
  const totalPrice = useMemo(() => {
    console.log('計算總價...');
    return products.reduce((sum, product) => sum + product.price, 0);
  }, [products]);

  const handleCheckout = useCallback(() => {
    console.log('結帳處理...');
    // 假設這裡有複雜的結帳邏輯
  }, []);

  return (
    <div>
      <h2>購物車</h2>
      <ul>
        {products.map(product => (
          <CartItem key={product.id} {...product} />
        ))}
      </ul>
      <p>總價: NT${totalPrice}</p>
      <button onClick={handleCheckout}>結帳</button>
    </div>
  );
};

export default Cart;

在這個例子中:

  1. 我們使用 memo 來優化 CartItem,避免不必要的重新渲染。
  2. 使用 useMemo 來記住總價的計算結果。
  3. 使用 useCallback 來記住結帳處理函數。

小結

今天我們學習了 React 的幾個重要效能優化工具:memouseMemouseCallback。這些工具就像是幫助我們的 React 應用程式減肥的好幫手,讓它變得更輕盈、反應更快速。

記住,優化是要針對實際需求來做的。不要為了優化而優化,而是要在發現效能問題時,在來尋找優化的方法。

如果想更了解 React 的效能優化,可以查看 React 官方文件中的效能優化章節


上一篇
[Day 9] React 錯誤邊界:讓你的應用程式不再整個掛掉
下一篇
[Day 11] React 錯誤處理和除錯
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言